<template>
    <div>
        <v-head></v-head>
        <div class="content-box sp-position" v-loading="loading2"  @drop='drop($event)' @dragover="allowDrag($event)">
            <div class="collapse_container">
                <div class="noDataImg" v-if="userList.length == 0"><img src="../../assets/images/noData.png" alt=""><p>暂无数据</p></div>
                <el-collapse v-model="activeNames" @change="handleColChange" v-for="itemm in connectIds" :key="itemm.conId">
                    <el-collapse-item :title="'数据库链接：' + itemm.conName" :name="itemm.conName">
                        <div class="box_container" 
                            draggable=true 
                            @dragstart='drag($event)'
                            @dragenter='dragEnter($event)' 
                            @drop="dropTarget($event)"
                            @dragover="allowDrag($event)"
                            v-for="(item,index) in userList" 
                            v-if="item.connectId == itemm.conId"
                            :key="index" 
                            :index="index"
                            :rowId="item.rowId"
                        >
                        <div class="clearfix box_header" :style="{backgroundColor:(item.exceptionCount!==0? userColor||'#e06733':'#fff')}">
                            <p class="box_title hid l" :title="item.title" :style="{color:(item.exceptionCount!==0?'#fff':'#232323')}">{{item.title || '未设置标题'}}</p>
                            <!-- <p class="box_title r"><span :style="{color:(item.statusName=='调度中'?'#fff':'#232323')}" @click="goToTable(item.rowId,item.title,item.lastExecTime)">MORE</span><img src="../../assets/images/icon_more2.png" alt="" v-if="item.statusName == '调度中'"><img src="../../assets/images/icon_more1.png" alt="" v-if="item.statusName !== '调度中'"></p> -->
                            <img :src="zgImg" alt="" class="zg" v-if="item.statusName=='暂挂'">
                        </div>
                        <div class="table_container">
                            <div :style="{color:(item.exceptionCount!==0?userColor||'#e06733':'#3d3d3d')}" :class="item.exceptionCount==0?'nodata':'list_num'" v-loading="item.loading">
                                <span @click="goToTable(item.exceptionCount, item.rowId,item.title,item.lastExecTime)">{{item.exceptionCount == 0 ? '暂无数据':item.exceptionCount}}</span>
                                <a target="_blank" :href="'/api/auth/data/export?sessionId=' + sessionId + '&fileId=' + item.rowId" v-if="item.exceptionCount !== 0"><img :src="bookImg" alt=""></a>
                            </div>
                        </div>
                        <div class="table_footer clearfix">
                            <div class="footer_l">{{item.lastExecTime ? formatDate(item.lastExecTime):''}}</div>
                            <!-- <img src="../../assets/images/icon6-yd.png" alt="" class="footer_r" @click="refresh(item.rowId)"> -->
                            <img src="../../assets/images/tan2.png" alt="" class="footer_r" @click="handleTan(item)">
                        </div>
                    </div>
                    </el-collapse-item>
                </el-collapse>
                <div class="switchData clearfix">
                    <p class="switchL" @click="chooseData(1)" :class="flag==1?'switchBack':'switchBack2'" :style="{background:(flag==1 && userColor?userColor:'')}">全部</p>
                    <p class="switchR" @click="chooseData(0)" :class="flag==0?'switchBack':'switchBack2'" :style="{background:(flag==0 && userColor?userColor:'')}">仅数据</p>
                </div>
                <div style="font-size: 14px">
                    <el-dialog
                    :visible.sync="dialogVisible"
                    width="40%"
                >
                    <div>
                        <el-row>
                            <div class="lb">监控内容标题：</div>
                        </el-row>
                        <el-row>
                            <div class="cont">{{jk_title}}</div>
                        </el-row>
                        <el-row>
                            <div class="lb">内容描述：</div>
                        </el-row>
                        <el-row>
                            <div class="cont2">
                                <el-input
                                    type="textarea"
                                    :readonly=readonly
                                    :row="5"
                                    v-model="jk_description"
                                    :autosize="{minRows:2,maxRows:10}"
                                ></el-input>
                            </div>
                        </el-row>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
                </div>
            </div>
        </div>       
    </div>
</template>

<script>
import { mapState } from "vuex";
import vHead from "../common/Header.vue";
export default {
  components: {
    vHead
  },
  data() {
    return {
      dialogVisible: false,
      vloading: false,
      loading2: false,
      loading: false,
      userTables:[],
      localUserList:[],
      dom: null,
      targetDom: null,
      enterDom: null,
      activeNames: [],
      connectIds: [],
      sessionId: localStorage.getItem('sessionId'),
      flag: 2,
      jk_title:"",
      jk_description: "",
      readonly: true
    };
  },
  created() {
    this.getUserList();
    this.getUsercolor();
    if(this.userColor == null || this.userColor == '') {
        this.$store.state.system.userColor = '#e06733'
    }
  },
  mounted() {
    this.setHtmlFontSize();
  },
  computed: mapState({
    msg: state => state.user.msg,
    userList: state => state.task.userList,
    userTable: state => state.task.userTable,
    num: state => state.task.num,
    basicInfo: state => state.system.basicInfo,
    extra: state => state.task.extra,
    userColor: state => state.system.userColor,
    extraFlag: state => state.task.extraFlag,
    bookImg: state => state.system.bookImg,
    zgImg: state => state.system.zgImg,
    //showStatus: state => state.task.showStatus
  }),
  methods: {
    toTextarea(str) {
        if(str) {
            let reg = new RegExp("<br>","g");
            let regSpace = new RegExp("&nbsp","g");
            str = str.replace(reg,"\n");
            str = str.replace(regSpace," ");
            return str;
        }else{
            return;
        }
    },
    handleTan(item) {
        this.dialogVisible = true;
        this.jk_title = item.title;
        this.jk_description = this.toTextarea(item.description);
    },
    setHtmlFontSize() {
        const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
        const htmlDom = document.getElementsByTagName('html')[0];
        htmlDom.style.fontSize = htmlWidth / 7.5 + 'px';
    },
    chooseData(val) {
        this.flag = val;
        let errFlag;
        if(val == 0) {
            errFlag = true;
            this.$store.state.task.userList = [];
            this.getUserList(errFlag);
        }else{
            errFlag = false;
            this.$store.state.task.userList = [];
            this.getUserList(errFlag);
        }
    },
    clearUpDefaultEvent(event) {
        event = event || window.event || arguments.callee.caller.arguments[0];
        if (event.preventDefault) {//IE not have
            event.preventDefault();
        }
        event.returnValue = false;
    },
    handleColChange(val) {
        console.log(val);
    },
    formatDate(d) {
        if (!!window.ActiveXObject || "ActiveXObject" in window) {
            return new Date(parseInt(d)).toLocaleString({hour12:false});
        }else if(navigator.userAgent.indexOf('Edge') > -1) {
            return new Date(parseInt(d)).toLocaleString({hour12:false});
        }else{
            return new Date(parseInt(d)).toLocaleString('chinese',{hour12:false});
        }
    },
    drag(event) {
        this.dom = event.currentTarget;
        let parent = document.getElementsByClassName('content-box')[0];
    },
    dragEnter(event) {
        let in1 = event.currentTarget.parentNode.parentNode.parentNode.querySelector('.el-collapse-item__header').innerText;
        let in2 = this.dom.parentNode.parentNode.parentNode.querySelector('.el-collapse-item__header').innerText;
        if(event.currentTarget !== this.dom && in1 == in2) {
            event.currentTarget.classList.add('bdRight');
            this.enterDom = event.currentTarget;
        }
    },
    allowDrag(event) {
        this.clearUpDefaultEvent(event);
        //event.preventDefault();
    },
    dropTarget(event) {
        this.clearUpDefaultEvent(event);
        //event.preventDefault();
        this.targetDom = event.currentTarget;
        let eles = document.getElementsByClassName('box_container');
        for(let i = 0; i < eles.length; i++) {
            eles[i].classList.remove('bdRight');
        }
    },
    drop(event) {
        this.clearUpDefaultEvent(event);
        //event.preventDefault();
        let targetParent = this.targetDom.parentNode.parentNode.parentNode;
        let domParent = this.dom.parentNode.parentNode.parentNode;
        if(this.dom !== this.targetDom && targetParent.querySelector('.el-collapse-item__header').innerText == domParent.querySelector('.el-collapse-item__header').innerText) {
            let parent = this.dom.parentNode;
            parent.removeChild(this.dom);
            parent.insertBefore(this.dom, this.targetDom.nextSibling);
            let eles = document.getElementsByClassName('box_container');
            let arr = [];
            for(let i = 0; i < eles.length; i++) {
                let obj = {};
                obj.rowId = eles[i].getAttribute('rowId');
                obj.seq = eles[i].getAttribute('index');
                arr.push(obj);
            }
            this.$store.dispatch("sortTables",{
                sessionId: localStorage.getItem('sessionId'),
                sortBeanList: arr
            });
        }
    },
    getUserList(errorFlag) {
      this.$store.state.task.userList = [];
      this.loading2 = true;
      this.$store.dispatch("getUserSql", {
        pageNo: 1,
        pageSize: 99,
        errorFlag: errorFlag,
        sessionId: localStorage.getItem("sessionId")
      }).then(() => {
          if(this.extraFlag == true) {
              this.flag = 0
          }else{
              this.flag = 1
          }
          this.loading2 = false;
          let arr = [];
          this.connectIds = [];
          this.activeNames = [];
          this.userList.map((item) => {
              //获取
              let obj = {};
              if(arr.indexOf(item.connectId) == -1) {
                  obj.conId = item.connectId;
                  obj.conName = item.connectName;
                  arr.push(item.connectId);
                  this.connectIds.push(obj);
                  this.activeNames.push(item.connectName);
              }
              //为了加loading请求info接口
              this.$set(item, 'loading', true);
              this.$store.dispatch('getUserTable',{
                  fileId: item.rowId,
                  size: 3,
                  dataVersion: item.dataVersion,
                  sessionId: localStorage.getItem('sessionId')
              }).then(() => {
                    this.$set(item, 'loading', false)
                    this.$set(item, 'exceptionCount',this.extra.count);
                    this.$set(item,'status',this.extra.status);
                    this.$forceUpdate();
              })
          });
      })
    },
    goToTable(num,id,title,lasttime) {
        if(num !== 0) {
            let openType = localStorage.getItem('openType');
            if(openType == 0) {
                this.$router.push({ name:'tabledetail', params: {id:id,title:title,lasttime:lasttime}});
            }else{
                const {href} = this.$router.resolve({
                    name: "tabledetail",
                    query: {
                        id:id,
                        title:title,
                        lasttime:lasttime
                    }
                });
                window.open(href, '_blank');
            }
        }
    },
    getBasicInfo() {
        this.loading2 = true;
        this.$store.dispatch('getBasicInfo',{
            sessionId: localStorage.getItem('sessionId')
        }).then(() => {
            localStorage.setItem('dashboardnum',this.basicInfo.commonSettingEntity.dashBoardNum);
            this.errorFlag = this.basicInfo.commonSettingEntity.simpleFlag;
            if(this.errorFlag == true) {
                this.flag = 0
            }else{
                this.flag = 1
            }
            this.getUserList(this.errorFlag);
        })        
    },
    getUsercolor() {
        this.$store.dispatch('getUserColor',{
            sessionId: localStorage.getItem('sessionId')
        })
    },
    refresh(id) {
        if(id == null) {
            this.$message('参数异常');
        }else{
            this.$store.dispatch('getUserTable',{
                fileId: id,
                sessionId: localStorage.getItem('sessionId')
            }).then(() => {
                this.userList.map((item) => {
                    if(item.rowId == id) {
                        this.$set(item, 'exceptionCount',this.extra.count);
                        this.$set(item,"title",this.extra.title);
                        this.$set(item,"lastExecTime",this.extra.lastExecTime);
                    }
                })
            });
        }
    }
  }
};
</script>


<style scoped>
.content-box >>> .el-collapse-item{
    width: 99.2%;
}
.content-box >>>.el-collapse-item__header{
    padding-left: 76px;
    background: #f0f0f0;
}
.content-box >>> .el-collapse-item__wrap{
    background: #f0f0f0;
    padding-left: 40px;
}
.content-box >>> .el-collapse-item__arrow{
    float: left
}
.content-box >>> .el-collapse-item__content{
    overflow: hidden;
    padding-top: 10px;
    padding-bottom: 0;
}
.content-box >>> .el-textarea__inner{
    font-family: "微软雅黑"
}
.collapse_container{
    position: relative;
}
.box_container {
  float: left;
  width: 21%;
  height: 144px;
  background-color: #fff;
  border: 1px solid #e6eaef;
  margin: 0 0 34px 32px;
  border-radius: 20px;
}
.sp-position{
    left:0; 
    top: 87px;
}
.box_container.changeColor{
    border-top-color: #afafaf;
}
.box_title {
  font-size: 15px;
  line-height: 42px;
  color: #fff;
}
.box_title span{
    float: left;
    font-size: 12px;
    margin-right: 5px;
    cursor: pointer;
}
.box_title img{
    width: 14px;
    padding: 13px 25px 0px 3px;
    display: inline-block;
}
.box_title.hid{
    white-space:nowrap;
    width:94%;
    overflow:hidden;
}
.bdRight{
    border-top:4px solid #606266;
}
.table_container {
  position:relative;
  height: 60px;
  text-align: center;
}
.more {
  line-height: 30px;
  color: #606266;
  font-size: 12px;
  margin-left:10px;
}
.right_block{
    padding-right:10px;
}
.refresh{
    cursor: pointer;
    font-size: 12px;
    line-height:30px;
}
.tan{
    width: 20px;
    position: absolute;
    right: 25px;
    top: 11px;
    z-index: 1;
    cursor: pointer;
}
.lb{
    font-size: 16px;
}
.cont{
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
}
.cont2{
    margin-top: 10px;
}
.num{
    display: inline-block;
    width: 40px;
    line-height: 20px;
    background-color: red;
    text-align: center;
    color: #fff;
    font-size: 12px;
    margin: 5px;
    border-radius: 2px;
}
.statusname{
    font-size: 12px;
    line-height: 30px;
    margin-left: 67px;
}
.yc{
    background-color: red;
}
.box_header{
    position: relative;
    font-family: "华文细黑", "微软雅黑", Arial, Helvetica, sans-serif;
    height: 42px;
    padding-left: 17px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.zg{
    position: absolute;
    right: -5px;
    top: -5px;
    width: 55px;
    z-index: 0;
}
.list_num{
    position: relative;
    font-family: "华文细黑", "微软雅黑", Arial, Helvetica, sans-serif;
    margin: 5px auto 0 auto;
    width: 180px;
    font-size: 36px;
    cursor: pointer;
}
.nodata{
    position: relative;
    font-family: "华文细黑", "微软雅黑", Arial, Helvetica, sans-serif;
    margin: 5px auto 0 auto;
    font-size: 14px;
    padding-top: 20px;
}
.list_num img{
    position: absolute;
    right: 23px;
    top: 24px;
    width: 20px;
}
.table_footer{
    font-family: "华文细黑", "微软雅黑", Arial, Helvetica, sans-serif;
    margin-top: 7px;
}
.footer_l{
    float: left;
    font-size: 14px;
    color: #cecece;
    margin-left: 18px;
}
.footer_r{
    display: block;
    float: right;
    width: 18px;
    margin-right: 17px;
    cursor: pointer;
}
.switchData{
    position: absolute;
    top: 10px;
    right: 79px;
    width: 160px;
    height: 34px;
    border-radius: 18px;
    border: 1px solid #c3c3c3;
}
.switchL{
    cursor: pointer;
    float: left;
    width: 80px;
    color: #8e8e8e;
    text-align: center;
    font-size: 13px;
    height: 35px;
    line-height: 36px;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}
.switchR{
    cursor: pointer;
    float: left;
    width: 80px;
    color: #8e8e8e;
    text-align: center;
    font-size: 13px;
    height: 36px;
    line-height: 36px;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}
.switchBack{
    background:#4c4c4c;
    color: #fff;
}
.switchBack2{
    color: #8e8e8e;
}
.active{
    color:#fff;
    background-color: #4c4c4c;
}
.noDataImg{
    width: 450px;
    margin: 80px auto 0 auto;
}
.noDataImg img{
    width: 450px;
}
.noDataImg p{
    margin-top: 40px;
    color: #8e8e8e;
    text-align: center;
    font-size: 14px;
}
@media only screen and (max-width: 750px) {
    .content-box >>>.el-collapse-item__header{
        padding:0.2rem 0 0 0.2rem;
        font-size: 0.26rem;
        color: #8e8e8e;
        font-family: "华文细黑", "微软雅黑", Arial, Helvetica, sans-serif;
    }
    .content-box >>> .el-collapse-item__wrap{
        padding-left: 0px;
    }
    .sp-position{
        left:0; 
        top: 2.64rem;
    }
    .collapse_container{
        position: static;
    }
    .switchData{
        position: fixed;
        top: 1.21rem;
        right: 0.47rem;
        width: 3rem;
        height: 0.7rem;
        border-radius: 0.35rem;
        border: 1px solid #c3c3c3;
    }
    .switchL{
        width: 1.5rem;
        color: #232323;
        text-align: center;
        font-size: 0.3rem;
        height: 0.7rem;
        line-height: 0.7rem;
        border-top-left-radius: 0.35rem;
        border-bottom-left-radius: 0.35rem;
        font-family: "华文细黑", "微软雅黑", Arial, Helvetica, sans-serif;
    }
    .switchR{
        width: 1.5rem;
        color: #fff;
        text-align: center;
        font-size: 0.3rem;
        height: 0.7rem;
        line-height: 0.7rem;
        border-top-right-radius: 0.35rem;
        border-bottom-right-radius: 0.35rem;
        font-family: "华文细黑", "微软雅黑", Arial, Helvetica, sans-serif;
    }
    .switchBack{
        background:#fff;
        color: #232323;    
    }
    .switchBack2{
        color: #fff;
    }
    .box_container {
        position: relative;
        float: left;
        width: 44%;
        height: 4rem;
        background-color: #fff;
        border: 1px solid #e6eaef;
        margin: 0 0 0.34rem 0.32rem;
        border-radius: 0.2rem;
    }
    .box_header{
        position: relative;
        font-family: "华文细黑", "微软雅黑", Arial, Helvetica, sans-serif;
        height: 0.8rem;
        padding-left: 0.2rem;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;
    }
    .box_title {
        font-size: 0.26rem;
        line-height: 0.8rem;
    }
    .zg{
        right: -0.05rem;
        top: -0.05rem;
        width: 0.9rem;
    }
    .list_num{
        position: relative;
        font-family: "华文细黑", "微软雅黑", Arial, Helvetica, sans-serif;
        margin: 0.8rem 0 0 1rem;
        width: 1.8rem;
        font-size: 0.7rem;
        cursor: pointer;
    }
    .list_num img{
        position: static;
        right: 0.4rem;
        top: 0.53rem;
        width: 0.33rem;
    }
    .table_footer{
        position: absolute;
        bottom: 0.15rem;
        width: 100%;
    }
    .footer_l{
        font-size: 0.2rem;
        margin-left: 0.22rem;
        color: #8e8e8e;
    }
    .footer_r{
        width: 0.3rem;
        margin-right: 0.2rem;
    }
    .nodata{
        margin: 5px auto 0 auto;
        font-size: 0.26rem;
        padding-top: 1rem;
    }
}
@media only screen and (min-width: 751px) {
    
}
</style>
